<template>
	<view class="container">
		<view class="fiexd-top">
			<view class="header">
				<view class="arrow" @tap="$back()"><image src="../../../static/images/arrow_left.png" mode="aspectFit"></image></view>
				<view class="text f36 cfff">员工信息</view>
				<view class="save f36 cfff" @tap="getEditSave()">保存</view>
			</view>
		</view>
		<view style="height: 130upx;"></view>
		<view class="list">
			<view class="list-item">
				<view class="name f30 c333">姓名</view>
				<view class="input-box"><input type="text" :placeholder="staffInfo.name" v-model="name" /></view>
			</view>
			<view class="list-item">
				<view class="name f30 c333">手机号</view>
				<view class="input-box"><input type="number" :placeholder="staffInfo.telephone" v-model="phone" /></view>
			</view>
			<view class="list-item">
				<view class="name f30 c333">密码</view>
				<view class="input-box">
					<input type="password" placeholder=".........." />
					<view class="text f30" @tap="open">重设员工密码</view>
				</view>
			</view>
		</view>

		<view class="rolesBox mt20"  @click="goRoles">
			<view class="name f30 c333">所属角色</view>
			<view class="arrow">
				<view class="f30 c333" v-for="(val, index) in roles" :key="index">
					{{ val.name }}
					<block v-if="index < roles.length - 1">/</block>
				</view>
				<image src="../../../static/images/arrow_right.png" mode="aspectFit"></image>
			</view>
		</view>

		<view class="list mt20">
			<view class="list-item">
				<view class="name f30 c333">微信</view>
				<view class="input-box"><input type="text" :placeholder="staffInfo.wechat" v-model="wechat" /></view>
			</view>
			<view class="list-item">
				<view class="name f30 c333">QQ</view>
				<view class="input-box"><input type="number" :placeholder="staffInfo.qq" v-model="qq" /></view>
			</view>
		</view>

		<view class="rolesbtn"><text class="f36 cfff" @tap="deleteBtn()">删除员工</text></view>

		<!-- 重设员工密码弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请输入新密码</view>
					<view class="input-box"><input type="text" placeholder="" v-model="pwd" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="close">取消</view>
						<view class="submit" @click="submit">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			userId: '',
			name: '',
			phone: '',
			qq: '',
			pwd: '',
			wechat: '',
			roles: [],
			staffInfo: {},
			auth_group_ids: []
		};
	},
onShow() {
	if(uni.getStorageSync('list')==''){
			this.roles=[]
		this.auth_group_ids.forEach(item => {
		
			if (item == 1) {
				this.roles.push({
					name: '店铺管理员',
					lit: 1
				});
			}
			if (item == 2) {
				this.roles.push({
					name: '销售员',
					lit: 2
				});
			}
			if (item == 3) {
				this.roles.push({
					name: '创库管理员',
					lit: 3
				});
			}
		});
	}else{
			this.roles=uni.getStorageSync('list')
	}
},
	onLoad(option) {
		let that = this;
		that.staffInfo = JSON.parse(option.item);
		that.userId = option.userId;
		this.auth_group_ids = this.staffInfo.auth_group_ids;
		console.log(this.auth_group_ids);
	
	},
	methods: {
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		goRoles(){
			uni.navigateTo({
				url:'./roles'
			})
		},
		getEditSave() {
			let that = this;
			let c = [];
			this.roles.forEach(item => {
				c.push(item.lit);
			});
			console.log(c);
			this.$ajax('api/v1.user/edit', {
				user_id: that.userId,
				name: that.name == '' ? that.staffInfo.name : that.name,
				wechat: that.wechat == '' ? that.staffInfo.wechat : that.wechat,
				qq: that.qq == '' ? that.staffInfo.qq : that.qq,
				auth_group_ids: c
			})
				.then(res => {
					// console.log(res);
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					uni.navigateTo({
						url: './list'
					});
				})
				.catch(res => {
					console.log(Error);
				});
			// that.$ajax(
			// 'api/v1.user/edit',
			// {
			// user_id:that.userId,
			// name:that.name==''?that.staffInfo.name : that.name,
			// wechat:that.wechat==''? that.staffInfo.wechat : that.wechat,
			// qq:that.qq==''? that.staffInfo.qq : that.qq,
			// auth_group_ids:c

			// },
			// 'GET'
			// ).then(res=>{

			// }).catch(res=>{
			// 	console.log(error)
			// })
		},
		submit() {
			let that = this;
			that.$ajax('api/v1.user/password', {
				user_id: this.userId,
				password: this.pwd
			})
				.then(res => {
					if (res.code == 1) {
						console.log(res);
						this.$refs.popup.close();
					}
				})
				.catch(res => {
					$sToast(res.message);
				});
		},
		deleteBtn() {
			let that = this;
			that.$ajax('api/v1.user/del', {
				user_id: that.userId
			})
				.then(res => {
					if (res.code == 1) {
						that.$sToast('删除成功');
						setTimeout(function() {
							uni.navigateTo(
								{
									url: './list'
								},
								1500
							);
						});
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #ffffff;
}

.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #fff;
	top: 0;
	z-index: 999;
}

.fiexd-top {
	width: 100%;
	position: fixed;
	z-index: 99999;
}

.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #249af6;
	padding: 55upx 30upx 25upx 30upx;

	.arrow {
		image {
			width: 22upx;
			height: 40upx;
		}
	}
}
.list {
	.list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: $white-background;
		border-bottom: 2upx #eee solid;
		padding: 30upx;
		position: relative;
		&:last-child {
			border-bottom: none;
		}
		.name {
			position: absolute;
			left: 30upx;
			top: 30upx;
		}
		.input-box {
			width: 100%;
			padding-left: 140upx;
			display: flex;
			flex-direction: row;
			input {
				width: 100%;
				font-size: 30upx;
				color: #666;
				text-align: right;
			}
			.text {
				width: 100%;
				color: #249af6;
				margin-left: 160upx;
			}
		}
	}
}
.rolesBox {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: $white-background;
	padding: 35upx 30upx;
	.arrow {
		display: flex;
		flex-direction: row;
		image {
			width: 20upx;
			height: 35upx;
			margin: 4upx 0 0 18upx;
		}
	}
}
.rolesbtn {
	width: 700upx;
	margin: auto;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	background-color: #249af6;
	margin-top: 130upx;
}
</style>
